<template>
  <div class="navMenu">
    <template v-for="navMenu in menuData">
      <!-- 最后一级菜单 叶子菜单 -->
      <el-menu-item v-if="navMenu.children.length==0"
                    :index="navMenu.href"
      >
        <i :class="navMenu.icon"></i>
        <span slot="title">{{navMenu.title}}</span>
      </el-menu-item>

      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.children.length!=0"
                  :index="navMenu.mid+''">
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{navMenu.title}}</span>
        </template>
        <!-- 递归 -->
        <Menu :menuData="navMenu.children"></Menu>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  //接受使用者传递的数据
  props: ['menuData'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style>
</style>
